<template>
    <div class="large-demandLibrary">
        <a-table :loading="loading" :rowKey="(item,i)=>item.demandName+'_'+i" :columns="columns" :data-source="pageData" :pagination="false">

        </a-table>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
@Component({
    name: "home",
    components: {},
})
export default class extends Vue {
    @Prop({ default: () => {} }) pageData!: any;
    loading = false;
    columns = [
        {
            align: "center",
            dataIndex: "demandName",
            key: "demandName",
            title: "需求名称",
        },
        {
            align: "center",
            dataIndex: "subCategory",
            key: "subCategory",
            title: "细分领域",
        },
        {
            align: "center",
            dataIndex: "investmentMax",
            key: "investmentMax",
            title: "发布金额",
            customRender: (text: string, record: any, index: number) => {
                if (record.investmentMin || record.investmentMin === 0) {
                    let str = record.investmentMin + "-" + record.investmentMax + "万元";
                    return str;
                } else {
                    return "--";
                }
            },
        },
    ];
    mounted() {}
}
</script>
<style lang="scss">
.large-demandLibrary {
    min-height: 20vh;
    max-height: 25vh;
    margin-top: 5px;
    overflow-y: auto;
    .ant-table-thead tr th,
    .ant-table-tbody tr td {
        padding: 4px 2px;
        font-size: 14px;
        border-bottom: unset;
    }
    .ant-table-thead tr th {
        background-color: rgba(6, 75, 115, 1);
        color: rgba(68, 187, 255, 1);
    }
    .ant-table-tbody tr td {
        color: #fff;
        text-shadow: 0px 0px 4px rgba(255, 116, 76, 0.4);
        border-right: solid 1px rgba(255, 255, 255, 0.1);
    }
    .ant-table-tbody tr td:last-child {
        border-right: unset;
    }
    .ant-table-row:nth-child(2n-1) {
        background-color: rgba(255, 255, 255, 0.1);
    }
    .ant-table-placeholder {
        background-color: transparent;
        border-top: unset;
        border-bottom: unset;
    }
    .ant-empty-normal {
        color: rgb(68, 187, 255);
    }
}
</style>
